import React from 'react'
import * as d3 from "d3";
// import * as mock from 'mockjs'

class Pie extends React.Component {

    draw1 = () => {
        
        let marge = { top: 0, bottom: 60, left: 0, right: 60 }
        let svg = d3.select(".s1")
        let width = svg.attr("width")
        let height = svg.attr("height")
        let g = svg.append("g")
            .attr("transform", "translate(" + marge.top + "," + marge.left + ")");
        
        let dataset = [30, 10, 43, 55, 13];

        //设置一个color的颜色比例尺，为了让不同的扇形呈现不同的颜色
        let colorScale = d3.scaleOrdinal()
            .domain(d3.range(dataset.length))
            .range(d3.schemeAccent);

        //新建一个饼状图
        let pie = d3.pie();

        //新建一个弧形生成器
        let innerRadius = 20;//内半径
        let outerRadius = 100;//外半径
        let arc_generator = d3.arc()
            .innerRadius(innerRadius)
            .outerRadius(outerRadius);

        //将原始数据变成可以绘制饼状图的数据，
        let pieData = pie(dataset);

        //在浏览器的控制台打印pieData
        console.log(pieData);

        //在有了绘制饼状图必须的数据后，我们就可以开始绘制了
        let gs = g.selectAll(".g")
            .data(pieData)
            .enter()
            .append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")//位置信息

        //绘制饼状图的各个扇形
        gs.append("path")
            .attr("d", function (d) {
                return arc_generator(d);//往弧形生成器中出入数据
            })
            .attr("fill", function (d, i) {
                return colorScale(i);
            });

        //绘制饼状图上面的文字信息
        gs.append("text")
            .attr("transform", function (d) {//位置设在中心处
                return "translate(" + arc_generator.centroid(d) + ")";
            })
            .attr("text-anchor", "middle")
            .text(function (d) {
                return d.data;
            })
    }

    componentDidMount() {
        this.draw1()
    }
    render() {
        return  <svg className="s1" width="960" height="250"></svg>
    }
}

export default Pie